import React from 'react';
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

import { Link, Outlet } from 'react-router-dom';
import { Layout, Menu } from 'antd';
// 临时移除Helmet导入以排查错误
import menuData from '../../data/menuData.json';
import styles from './index.module.css';
import RecommendationsSection from '../../components/RecommendationsSection';


const { Header, Content } = Layout;

// 转换menuData为Menu组件所需的items格式
const menuItems = menuData.map(item => ({
  key: item.key,
  label: <Link to={item.path}>{item.label}</Link>
}));

function Home() {
  const location = useLocation();
  useEffect(() => {
      // 设置页面标题
      document.title = "工具集 - 免费在线开发工具";

      // 设置描述元标签
      const descriptionMeta = document.querySelector('meta[name="description"]');
      if (descriptionMeta) {
        descriptionMeta.content = "一站式在线开发工具集，提供JSON格式化、Base64加密解密、时间戳转换等实用功能，无需安装，免费使用。";
      } else {
        const meta = document.createElement('meta');
        meta.name = "description";
        meta.content = "一站式在线开发工具集，提供JSON格式化、Base64加密解密、时间戳转换等实用功能，无需安装，免费使用。";
        document.head.appendChild(meta);
      }

      // 设置关键词元标签
      const keywordsMeta = document.querySelector('meta[name="keywords"]');
      if (keywordsMeta) {
        keywordsMeta.content = "工具,JSON格式化,Base64加密,时间戳转换,开发工具";
      } else {
        const meta = document.createElement('meta');
        meta.name = "keywords";
        meta.content = "工具,JSON格式化,Base64加密,时间戳转换,开发工具";
        document.head.appendChild(meta);
      }
    }, []);

    return (
      <Layout>
        <Header className={styles.header}>
        <Menu
          mode="horizontal"
          items={menuItems}
          defaultSelectedKeys={['home']}
          style={{ lineHeight: '64px' }}
        >
        </Menu>
      </Header>
      <Content className={styles.content}>
        {/* 临时移除Helmet组件以排查错误 */}
        {location.pathname === '/' && <RecommendationsSection />}
        <Outlet />
      </Content>
    </Layout>
  );
}

export default Home;
